<script setup>
import { defineProps } from "vue";
const props = defineProps({
  wayInfo: {
    type: Object,
    required: true,
  },
});

function navigateToOrder() {
  uni.navigateTo({
    url: "/pages/Rent/Order/index",
  });
}
</script>
<template>
  <view>
    <div class="card-container">
			<div class="info-list">
				<div class="info-item">
					<div title="info">{{props.wayInfo.range}}</div>
					<div class="info-title">租期</div>
				</div>
				<div class="info-item">
					<div title="info">{{props.wayInfo.age}}</div>
					<div class="info-title">车龄</div>
				</div>
				<div class="info-item">
					<div title="info">{{props.wayInfo.order}}</div>
					<div class="info-title">押金</div>
				</div>
				<div class="info-item">
					<div title="info">{{props.wayInfo.monthFee}}</div>
					<div class="info-title">月租</div>
				</div>
			</div>
			<div class="service-op">
			  <button class="service-button" @click="navigateToOrder">
			    选择方案
			  </button>
			</div>
    </div>
  </view>
</template>

<style scoped>
.card-container {
	width: 100%;
	height: 120px;
	padding: 20px;
	margin-bottom: 26px;
	background-color: #f7fff3;
	border-radius: 10px;
	box-sizing: border-box;
}

.info {
	font-size: 16px;
	font-weight: 600;
	color: #000;
}

.info-title {
	font-size: 12px;
	opacity: 0.5;
	color: #000;
}

.info-list {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 16px;
}

.info-item {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.service-op {
	display: flex;
	width: 100%;
	justify-content: flex-end;
}

.service-button {
  width: 160px;
  height: 30px;
	
	margin-right: 0px;
	
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 16px;

  background: linear-gradient(90deg, #026217 0%, #04c82f 100%);
  color: white;
  border: none;
  border-radius: 10px;
  outline: none;
}

</style>
